<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>网络攻防演练监控屏幕</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
  <link rel="shortcut icon" href="/static/images/favicon.ico">
  <!--[if lte IE 8]><meta http-equiv="refresh" content="0;url=/ie" /><![endif]-->
  
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  
  <link rel="stylesheet" href="/static/css/animate.min.css"/>
  <link rel="stylesheet" href="/static/css/morphext.css">
  <link rel="stylesheet" href="/static/css/main.css">
  <script src="/static/js/echarts.min.js"></script>
  <script src="/static/js/map/china.js"></script> 
  <script src="/static/js/jquery-3.2.1.min.js"></script> 
  <script src="/static/js/bootstrap.min.js"></script>
  <script src="/static/js/morphext.min.js"></script> 
</head>

<body class="container-fluid">
    <div class="col-md-12">
      <div class="row">
        <div id="main" style="height:1080px;"></div>
      </div>
    </div>
    
    <div class="col-md-6 screenshot_column">
      <div id="screenshot_pic"></div>
    </div>

    <div class="col-md-3 text_column" >
      <div class="intro">
      <h2><span class="label label-primary">3</span> 页面篡改攻击</h2>
      <p>天津某基础电信企业官网主页出现虚假信息，官网后台服务器遭受过口令破解攻击进而导致官网页面被篡改，攻击端IP来自河北某基础电信企业。  </p>
      </div>
      
      <div class="alarm">
      <h2 id="alarm_text"></h2>
      </div>
      
      <div class="defense">
      <h2 id="defense_text"></h2>
      </div>
    </div>
    
<div id="alarmModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <h1 class="alarm"><i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i>&nbsp;&nbsp;警报（Ⅱ级）</h1>
        <h1>发现网页篡改！</h1>
      </div>
    </div>
</div>
</body>


<script type="text/javascript">
var alarmModal = $('#alarmModal').on('shown.bs.modal', function () {
  clearTimeout(alarmModal.data('hideInteval'))
  var id = setTimeout(function(){
      alarmModal.modal('hide');
  }, 8000);
  alarmModal.data('hideInteval', id);
})
</script> 
<script type="text/javascript">
;WebPage = {
  api : "/api/webpage.json",
  pageStatus : {
  	status: ''
  },
  activeGeo : {},
  
  attackChart : echarts.init(document.getElementById('main')),
  alarmModal  : $('#alarmModal'),
  alarmText   : $('#alarm_text'),
  defenseText : $('#defense_text'),
  screenshotPic : $('#screenshot_pic'),
  
  screenshotUrl : function() {
    return '<img src="/static/images/' + this.pageStatus.screenshot + '" width="100%" height="100%"/>';
  },
  
  popupAlarmModal : function() {
    this.alarmModal.modal('show');
  },
  
  displayAlarmText : function() {
    this.alarmText.fadeOut(1000);
    this.alarmText.html(this.pageStatus.alarm_text);
    this.alarmText.fadeIn(2000);
  },
  
  hideAlarmText : function() {
    this.alarmText.fadeOut(1000);
  },
  
  displayDefenseText : function() {
    this.defenseText.html(this.pageStatus.defense_text);
    this.defenseText.fadeIn(2000);
  },
  
  morphextDefenseText : function() {
    this.defenseText.html(this.pageStatus.defense_text.join());
    this.defenseText.show();
    this.defenseText.Morphext({
      animation: "slideInRight",
      separator: ",",
      speed: 6000,
      complete: function () {
        if (this.phrases[this.index] === "更新应用服务器管理员口令") {
          WebPage.hideAlarmText();
        } else if (this.phrases[this.index] === "恢复被篡改的页面代码") {
          WebPage.hideScreenshot();
        }
		
        if (this.index === this.phrases.length - 1) {
          this.stop();
        }
      }
    });
  },
  
  displayScreenshot : function(delayTime) {
    this.screenshotPic.hide();
    this.screenshotPic.html(this.screenshotUrl());
    this.screenshotPic.delay(delayTime).slideDown(4000);
  },
  
  hideScreenshot : function() {
    this.screenshotPic.fadeOut(1000);
  },
  
  hideColumns : function() {
    this.alarmText.fadeOut(1000);
    this.defenseText.fadeOut(1000);
    this.screenshotPic.fadeOut(1000);
  },

  redrawChart : function() {
    moveOption.series[0].data = buildAttackLines();
    moveOption.series[1].data = buildAttackLines();
    moveOption.series[2].data = buildAreaScatter();
    moveOption.series[2].markPoint.data = buildDefenseMarkPoint();
    moveOption.series[3].data = buildDefensingLines();
    moveOption.series[4].data = buildDefensingLines();
    moveOption.geo = buildZoomCenter();
    this.attackChart.setOption(moveOption);
  },
  
 
  attack : function() {
    this.activeGeo = {
      zoom: 4,
      center: geoCoordMap[this.pageStatus.attackArea]
    };
    this.redrawChart();
    this.displayAlarmText();
  },
  
  alarm : function() {
    this.popupAlarmModal();
    this.displayAlarmText();
    this.displayScreenshot(9000);
  },
  
  analyze : function() {
    this.displayDefenseText();
  },
  
  repair : function() {
    this.morphextDefenseText();
  },
  
  defense : function() {
    this.displayDefenseText();
    this.activeGeo = {
        zoom: 4,
        center: geoCoordMap[this.pageStatus.attackArea]
      };
    this.redrawChart();
    setTimeout(function() { WebPage.defensed(); }, 6000);
  },
  
  defensed : function() {
    this.pageStatus.status= 'defensed';
    this.activeGeo = {};
    this.redrawChart();
  },
  
  confirm : function() {
    this.displayDefenseText();
    this.displayScreenshot(1000);
  },
  
  initial : function() {
    this.activeGeo = {};
    this.redrawChart();
    this.hideColumns();
  },
}
</script> 
<script src="/echarts/webpage.js"></script> 
<script type="text/javascript">
function getJsonAndDraw() {
  $.getJSON(WebPage.api, function( result ) {
    if(WebPage.pageStatus.status == result.status) {
		return;
    }
    if(WebPage.pageStatus.status == 'defensed' && result.status == 'defense') {
  		return;
    }
    
    WebPage.pageStatus = result;
    
    switch(result.status) {
      case "attack":
        WebPage.attack();
        break;
      case "alarm":
        WebPage.alarm();
        break;
      case "analyze":
        WebPage.analyze();
        break;
      case "repair":
        WebPage.repair();
        break;
      case "defense":
        WebPage.defense();
        break;
      case "confirm":
        WebPage.confirm();
        break;
      default:
        WebPage.initial();
	  }
  });
}

getJsonAndDraw();
setInterval(getJsonAndDraw, 1000);

$(window).resize(function() {
  WebPage.attackChart.resize();
});
</script>
</html>
